<template>
    <div id="content">
        <userbar :obj="userdata"></userbar>
        <router-view></router-view>
        <ul class="navBar">
             <li @click="showitem(item.type)"
              v-for="(item,index) in nav" :type="item.type"  :class="[isShow==index?'avtive':'']"
              :key="item.type">{{item.name}}
                <span :class="[isShow==index?'bdactive':'']" ></span>
              </li>
        </ul>
        <div class="content"><person :msg='isShow'></person></div>
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" @click="tonav(0)">
                <router-link to="/index">首页</router-link>
                </van-tabbar-item>
            <van-tabbar-item icon="search" @click="tonav(1)">
                <router-link to="/mine">限时</router-link>
                </van-tabbar-item>
            <van-tabbar-item icon="friends-o" @click="tonav(2)">
                <router-link to="/mine">标签</router-link>
                </van-tabbar-item>
            <van-tabbar-item icon="setting-o" @click="tonav(3)">
                <router-link to="/mine">我的</router-link>
                </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import person_1  from '@/components/person_1.vue'
import userbar  from '@/components/userbar.vue'

export default {
    data(){
        return {
            nav:[
                {
                    'name':'个人综合',
                    'type':0
                },
                {
                    'name':'个人打卡',
                    'type':1
                },
                {
                    'name':'个人批改',
                    'type':2
                },
                {
                    'name':'小组排行',
                    'type':3
                }
                ],
            isShow:0,
            active: 0,
            userdata:{
                nickname: '小花猫',
                num:'1',
                userlogo:'https://thirdwx.qlogo.cn/mmopen/vi_32/R4JdOVeRD1iarJd3fLqGZibhHd99fPKrpNia464NqGFDbgicj1GGGc00NDuEPrlEjlicGSJN8FE8J2PdYQNvspI9a5w/132'
            }
         }
    },
    mounted(){
      
    },
    computed:{

    },
    methods:{
        tonav(e){
            console.log(e);
            this.active = e;
        },
        showitem:function(e){
            this.isShow = e;
        },
        tohome(){
            this.$router.push('/')
        },
        async tomy(){
             this.$router.push('/mine')
        }
    },
    components:{
        person:person_1,
        userbar:userbar
     }
}
</script>
<style lang="less" scoped>
    .avtive{
        color: #000 !important;
    }
    .bdactive{
        height: 4px;
        display: block;
        border-bottom: 2px solid red;
        transform: translateY(-10px) scaleX(50%);
    }
    .fade-enter-active{
      transition: opacity .5s;
    }
     .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter{
      opacity: 0;
    }
    .fade-leave-to{
      opacity: 0;
    }
    .navBar{
        background-color: #f5f5f5;
        width: 100%;
        height: 40px;
        line-height: 45px;
        .name{
            display: inline-block;
            color: red;
        }
    }
    .navBar ul{
        
        list-style: none;
        background-color: back !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
    }
    li{display: inline-block;width: 25%;
            color: #ccc;
    }
    .content{
        overflow-y: scroll;
        height: 510px;
    }
</style>